<template>
	<div style='height:100%;'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		name : 'bar-chart',

		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
			
			}
		},
		
		computed : {
			options () {
                var xAxisData = this.value.area //['深圳', '湖北', '武汉']//this.value.area
                var totalData = this.value.data[0] //[100,100,100]
                var onlineData = this.value.data[1] //[80,80,80]
                var series = [
                    {
                        name : '总数',
                        type: 'bar',
                        barWidth : 15,
						barGap : '-100%',
						legendHoverLink : false,
						barMinHeight : 1,
                        itemStyle : {
                            color : '#43506b'
                        },
                        data : totalData
                    }
                ]
                series.push(
                    {
                        name : '在线设备',
                        type : 'bar',
                        barWidth : 15,
						barGap : '-100%',
						legendHoverLink : false,
						barMinHeight : 1,
                        data : onlineData.map((value, index) => {
                            var startColor = '#b578f4'
                            var endColor = '#873bfe'
                            if(index % 2 != 0) {
                                startColor = '#7aa5f4'
                                endColor = '#3f75fd'
                            }
                            return {
                                value : value,
                                itemStyle : {
									opacity : value <= 0 ? 0 : 1,
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: startColor // 0% 处的颜色
                                        }, {
                                            offset: 1, color: endColor // 100% 处的颜色
                                        }]
                                    }
                                }
                            }
                        })
                    }
                )
				
                
                
                
				
				var options =  {
                    tooltip : {
						show : true,
						trigger: 'axis',
                    },
					grid : {
						top : '30px',
						right : '30px',
						bottom : '20px',
						left : '70px'
					},
					
					dataZoom: [
						{
							type: 'inside',
							show: true,
							start: 0,
							end: 30,
							handleSize: 8
						}
					],
					
					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},

						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#373f50'
							}
						}
					},
					
					series: series
				}

				setTimeout(() => {
					var area = this.value.area.shift()
					var total = this.value.data[0].shift()
					var online = this.value.data[1].shift()
					this.value.area.push(area)
					this.value.data[0].push(total)
					this.value.data[1].push(online)
				}, 2000)

				return options
			}
		}
	}
</script>